<template>
  <div>
    <perfect-scrollbar class="scroll-bar">
      <div class="wallpaper-list">
        <div
          class="wallpaper-item"
          v-for="(item, index) in dynamicList"
          :key="index"
          @click="handleUse(item)"
        >
          <img :src="item.cover" alt="" />
        </div>
      </div>
    </perfect-scrollbar>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import useStore from '@/store';
const { useSystemStore } = useStore();
import { toast } from "@/utils/feedback";

// https://movetab.jianyueku.com/api/wallpaper_video/search?offset=24&page=1
const dynamicList = reactive([
  {
    cover: "https://cccimg.com/view.php/8c5365fffd039027233c94ff3ce19bc8.jpg",
    video: "https://cccimg.com/view.php/833a1f6e6ecbeba1da5f52531c71167c.mp4",
  },
  {
    cover: "https://cccimg.com/down.php/ea0fdc0c6194f6558543248bd337f9c4.jfif",
    video: "https://cccimg.com/view.php/ecbece3b29cffc9509a5db599a91207e.mp4",
  },
  {
    cover: "https://cccimg.com/down.php/9bf7051fbc872ddff66e48ce22442a28.jfif",
    video: "https://cccimg.com/view.php/5454915ce374f45716715c8000d74bc3.mp4",
  },
  {
    cover: "https://cccimg.com/down.php/2dab9f565c4e1175bfe222a65f1de17d.jfif",
    video: "https://cccimg.com/view.php/873b4311cf2c195f739628ad52b5ae9a.mp4",
  },
  {
    cover: "https://cccimg.com/down.php/1cf9f71098180c440999e4807c5b5782.jfif",
    video: "https://cccimg.com/view.php/a969571aaffeb3e342d55c1f7a601291.mp4",
  },
  {
    cover: "https://cccimg.com/down.php/ac5d65e6a304543a5b7983a8e2fc6e90.jfif",
    video: "https://cccimg.com/view.php/d363a7c6380f1fc31662d4226382642c.mp4",
  },
  {
    cover: "https://cccimg.com/down.php/254bb9fa338a41520b63986860c6e626.jfif",
    video: "https://cccimg.com/view.php/3a97bdf35a27c87721eed467287eb757.mp4",
  },
  {
    cover: "https://cccimg.com/down.php/b5d434ab3180b893ebb0810de0ee8a54.jfif",
    video: "https://cccimg.com/view.php/7b31e7a405b9f482189431f8f3d98e8c.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/liulangdiqiu.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/liulangdiqiu.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/diqiuzizhuan.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/diqiuzizhuan.mov",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/HelloSummer.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/HelloSummer.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/Everybody.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/Everybody.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/shaonvshidai.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/shaonvshidai.mov",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/xiaomao.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/xiaomao.mov",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/zhandi.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/zhandi.mov",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/qingliangyixia.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/qingliangyixia.mov",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1001.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1001.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1002.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1002.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1003.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1003.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1004.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1004.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1005.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1005.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1006.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1006.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1007.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1007.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1008.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1008.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1009.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1009.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1010.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1010.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1012.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1012.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1015.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1015.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1016.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1016.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1017.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1017.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1018.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1018.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1019.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1019.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1020.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1020.mp4",
  },
  {
    cover: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1022.jpg",
    video: "https://img.zhuayuya.com/wallpaper/video/wallpa_video_1022.mp4",
  },
]);

const handleUse = (item) => {
  useSystemStore.settings.wallpaper.url = `${item.video}`;
  useSystemStore.settings.wallpaper.type = "dynamics";
  toast({
    content: "壁纸切换成功！",
  });
}
</script>

<style lang="less" scoped>
.scroll-bar {
  height: 390px;
}
.wallpaper-list {
  display: flex;
  flex-wrap: wrap;
  .wallpaper-item {
    position: relative;
    width: 32%;
    height: auto;
    margin: 3px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      transition: all .3s;
    }
    video {
      width: 100%;
      height: 100%;
      transition: all .3s;
    }
    &:hover {
      img {
        transform: scale(1.1);
      }
    }
  }
}
</style>
